light mode
night mode
On This Page

সিএসএস৩ 2D ট্রান্সফর্ম (CSS3 2D Transform)

Web Development - সিএসএস (CSS) - সিএসএস৩ & এডভান্স সিএসএস (CSS3 & Advance CSS) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।

সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।

সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।

এক নজরে সিএসএস(৩) ট্রান্সফর্ম প্রোপার্টিসমূহ

এক নজরে সিএসএস(৩) 2D ট্রান্সফর্ম মেথডসমূহ

translate() মেথড

translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।

নিম্নের উদাহরণে আমরা

এলিমেন্টটিকে বর্তমান অবস্থান থেকে ডানে ৩০ পিক্সেল এবং নিচে ৩০ পিক্সেল সরাবোঃ

kt_satt_skill_example_id=1586

সিএসএস(৩) translate মেথডসমূহঃ

rotate() মেথড

সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।

kt_satt_skill_example_id=1590

rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।

kt_satt_skill_example_id=1594

সিএসএস(৩) rotate মেথডঃ

scale() মেথড

সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।

kt_satt_skill_example_id=1598

skew() মেথড

সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।

নিম্নের উদাহরণে আমরা

এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে ১০ডিগ্রী এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রী পরিবর্তন করবোঃ

kt_satt_skill_example_id=1601

skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।

নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায়

এলিমেন্টেটি শুধুমাত্র X-অক্ষের সাপেক্ষে ১৫ডিগ্রী তির্যক ভাবে ঘুরবেঃ

kt_satt_skill_example_id=1602

সিএসএস(৩) skew মেথডসমূহঃ

matrix() মেথড

সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।

matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।

ম্যাট্রিক্স এর গঠনঃ

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

kt_satt_skill_example_id=1606

সিএসএস(৩) matrix মেথডঃ

ব্রাউজার সাপোর্ট

Content added || updated By
Nayan Islam

আরও দেখুন...

সিএসএস৩ 2D ট্রান্সফর্ম (CSS3 2D Transform)

On This Page

Promotion

Promotion